NSMobile.views.performance = Ext.extend(Ext.Panel, {
	title: 'Performance',
	iconCls: 'chart4 ' + syncClass,
	baseCls: 'tab-Performance',
    cardSwitchAnimation: false,
    layout: 'card',
    fullscreen: true,
	defaults: {
		styleHtmlContent: false
	},

    initComponent: function () {
        NSMobile.stores.kpidata.load();
        NSMobile.stores.aflContacts.load();
        NSMobile.stores.teamContactsPaginated.load();
        NSMobile.stores.groupContactsPaginated.load();
        
        var perfPanel = new Ext.TabPanel({
            fullscreen: true,
			ui: 'light',
            tabBar: {
                hidden: true
            },
            items: [
		        {
                    xtype: 'kpi'
		        },
	        ],
            dockedItems: [
	            {
		            xtype: "toolbar",
		            title: "My Performance"
	            }
            ]
        });

        var details = new Ext.Panel({
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            fullscreen: true,
            dockedItems: [
                {
                    id: 'perfdetailtoolbar',
                    xtype: 'toolbar',
                    title: 'PRV',
                    items: [
                        {
                            text: 'Back',
                            ui: 'back',
                            handler: function () {
                                Ext.getCmp('performance').layout.prev({type: 'slide', direction: 'right'});
                            }
                        },
                        {
                            xtype: 'spacer'
                        },
                        {
                            id: 'prvlistsortbutton',
                            text: 'Date',
                            handler: function () {
                                prvSortPicker.show();
                            }
                        }
                    ]
                },
				{
					items: [
					    {
						    xtype: 'panel',
						    docked: 'top',
							cls: 'x-list-header',
						    html:'<header class="gridHeader PRVheader"><h1>My Personal Volumes by Order</h1></header>'	
					    }
					]
				}
            ],
            items: [
                {
                    flex: 1,
                    xtype: 'list',
					styleHtmlContent: false,
                    id: 'prvlist',
                    deferEmptyText: false,
                    emptyText: '<div class="noDataDisplay"><p>No records found.</p></div>',
                    store: NSMobile.stores.kpiorders,
                    itemTpl: [
                        '<section class="KPIdrill prvList">',
                            '<div class="row">',
                                '<span class="KPIdata">',
									'<span class="left">{name}</span> <span class="right">{date:date("m/d/Y")}</span><span class="clr"></span>',
									'<span  class="dataDisplayRow">',
										'<span class="prvDisplay"><label>PRV</label> {[values.prv.toFixed(2)]}</span> <span class="typeDisplay alignRight"><label>Type</label> {type}</span>',
										'<br class="clr"/>',
									'</span>',
								'</span>',
                            '</div>',
                        '</section>'
                    ],
                    listeners: {
                        itemtap: {
                            fn: function (obj, index, item, e) {
                                var data = NSMobile.stores.kpiorders.getAt(index).data;
                                orderDetail.update(data);
                                Ext.getCmp('performance').setActiveItem(2);
                            }
                        }
                    }
                }
            ]
        });

        prvSortPicker = new Ext.Picker({
            activeCls: 'activePicker',
            cls: 'styledPicker',
            doneButton: 'Sort',
            slots: [
                {
                    name: 'property',
                    title: 'Property',
                    data: [
                        { text: 'Date', value: 'Date' },
                        { text: 'Name', value: 'Name' },
                        { text: 'PRV', value: 'PRV' },
                        { text: 'Type', value: 'Type' }
                    ]
                },
                {
                    name: 'direction',
                    title: 'Direction',
                    data: [
                        { text: 'Asc', value: 'ASC' },
                        { text: 'Desc', value: 'DESC' }
                    ]
                }
            ],
            listeners: {
                change: {
                    fn: function (picker, values) {
                        NSMobile.stores.kpiorders.sorters.clear();
                        NSMobile.stores.kpiorders.sort(values.property.toLowerCase(), values.direction);
                        Ext.getCmp('prvlistsortbutton').setText(values.property);
                    }
                }
            }
        });

        var orderDetail = new Ext.Panel({
            scroll: 'vertical',
            id: 'kpiorderdetail',
            styleHtmlContent: false,
			cls: 'Orders',
            tpl: [
                '<div class="detail articleView orderDetailPage">',
					'<div class="articleView">',
						'<header>',
							'<h2 class="articleTitle">Order #{number}</h2>',
							'<h3 class="articleDate">{date:date("m/d/Y")}</h3>',
						'</header>',
						'<div class="detailsList">',
                    		'<p class="articleCopy"><span class="label">Name:</span> <span class="data">{name}</span></p>',
                    		'<p class="articleCopy"><span class="label">Type:</span> <span class="data">{type}</span></p>',
                    		'<p class="articleCopy"><span class="label">PRV:</span> <span class="data">{[values.prv.toFixed(2)]}</span></p>',
                    		'<p class="articleCopy"><span class="label">PWV:</span> <span class="data">{[values.pwv.toFixed(2)]}</span></p>',
                    		'<p class="articleCopy"><span class="label">Total:</span> <span class="data">${[values.total.toFixed(2)]}</span></p>',
						'</div>',
					'</div>',
                '</div>'
            ],
            dockedItems: [
                {
                    id: 'kpiorderdetailtoolbar',
                    xtype: 'toolbar',
                    title: 'Order Details',
                    items: [
                        {
                            text: 'Back',
                            ui: 'back',
                            handler: function () {
                                Ext.getCmp('performance').layout.prev({type: 'slide', direction: 'right'});
                            }
                        }
                    ]
                }
            ]
        });

        var peeps = new Ext.Panel({
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            fullscreen: true,
            dockedItems: [
                {
                    id: 'perfcontactlisttoolbar',
                    xtype: 'toolbar',
                    title: 'PRV',
                    items: [
                        {
                            text: 'Back',
                            ui: 'back',
                            handler: function () {
                                Ext.getCmp('performance').setActiveItem(0, pageBackAnimation);
                            }
                        },
//                        {
//                            xtype: 'spacer'
//                        },
//                        {
//                            id: 'peepslistsortbutton',
//                            text: 'Level',
//                            handler: function () {
//                                peepsSortPicker.show();
//                            }
//                        }
                    ]
                }
            ],
            items: [
                {
                    flex: 1,
                    xtype: 'list',
                    id: 'perfcontactlist',
                    deferEmptyText: false,
					styleHtmlContent: false,
                    emptyText: '<div class="noDataDisplay"><p>No records found.</p></div>',
                    store: NSMobile.stores.perfContacts,
                    itemTpl: [
                        '<section class="KPIdrill teamList">',
                            '<p class="row">',
                                '<span class="KPIdata">',
                                	'<span class="left">{firstName} {lastName}</span> <span class="right"> <label>Gen</label> {generation} <label>Level</label> {level}</span><span class="clr"></span>',
                                	'<span  class="dataDisplayRow">',
										'<span><label>PRV</label> {[values.prv.toFixed(2)]}</span> <span class="center"><label>TWV</label> {[values.twv.toFixed(2)]}</span> <span class="alignRight"><label>GWV</label> {[values.gwv.toFixed(2)]}</span>',
										'<br class="clr"/>',
									'</span>',
                            	'</span>',
							'</p>',
                        '</section>'
                    ],
                    plugins: [
                        new Ext.plugins.ListPagingPlugin({
                            autoPaging: true
                        })
                    ],
                    listeners: {
                        itemtap: {
                            fn: function (obj, index, item, e) {
                                var data = NSMobile.stores.perfContacts.getAt(index).data;
                                Ext.getCmp('contactdetail').update(data);
                                NSMobile.views.viewport.setActiveItem(2);
                                Ext.getCmp('contactdetail').cameFromPerf = true;
                                Ext.getCmp('network').setActiveItem(1);
                            }
                        }
                    }
                }
            ]
        });

        peepsSortPicker = new Ext.Picker({
            activeCls: 'activePicker',
            cls: 'styledPicker',
            doneButton: 'Sort',
            slots: [
                {
                    name: 'property',
                    title: 'Property',
                    data: [
                        { text: 'Generation', value: 'Generation' },
                        { text: 'GWV', value: 'GWV' },
                        { text: 'Level', value: 'Level' },
                        { text: 'Name', value: 'Name' },
                        { text: 'PRV', value: 'PRV' },
                        { text: 'TWV', value: 'TWV' }
                    ]
                },
                {
                    name: 'direction',
                    title: 'Direction',
                    data: [
                        { text: 'Asc', value: 'ASC' },
                        { text: 'Desc', value: 'DESC' }
                    ]
                }
            ],
            listeners: {
                change: {
                    fn: function (picker, values) {
                        NSMobile.stores.perfContacts.sorters.clear();

                        if (values.property == 'Level')
                            NSMobile.stores.perfContacts.sort('level', values.direction == 'ASC' ? 'DESC' : 'ASC');
                        else if (values.property == 'Name')
                            NSMobile.stores.perfContacts.sort('firstName', values.direction);
                        else
                            NSMobile.stores.perfContacts.sort(values.property.toLowerCase(), values.direction);

                        Ext.getCmp('peepslistsortbutton').setText(values.property);
                    }
                }
            },
            value: {
                property: 'Level',
                direction: 'ASC'
            }
        });

        Ext.apply(this, {
            items: [
                perfPanel,
                details,
                orderDetail,
                peeps
            ]
        });

        NSMobile.views.performance.superclass.initComponent.apply(this, arguments);
    }
});

Ext.reg('performance', NSMobile.views.performance);

var prvSortPicker, peepsSortPicker;